<template>
  <!-- 主体区域 -->
  <section id="app">  
    <TodoHeaderVue @addFn="handleAdd"></TodoHeaderVue>
    <TodoMainVue @del="handleDel" :handleList="list"></TodoMainVue> 
    <TodoFooterVue @clear="handleClear" :listName="list"></TodoFooterVue>
  </section>
</template>

<script>

import TodoHeaderVue from './components/TodoHeader.vue'
import TodoMainVue   from './components/TodoMain.vue'
import TodoFooterVue from './components/TodoFooter.vue' 
 
export default {
  data () {
    return {
    list:JSON.parse(localStorage.getItem('list'))|| [
    {id:1,name:'学习vue'},
    {id:2,name:'找工作'},
    {id:3,name:'去旅行'}
    ]
    }
  },
  methods:{
    handleAdd(todoNameList){ 
    this.list.unshift({
    id:+new Date(),
    name:todoNameList
    })  
  },
    handleDel(id){
   this.list=this.list.filter(item=>item.id!==id)
    },
    handleClear(){
    this.list=[]
    }
  },
  watch:{
    list:{
      deep:true,
      handler(newValue){
        // console.log(newValue);
      localStorage.setItem('list',JSON.stringify(newValue))
    }
  
}
  },
  components:{
    TodoHeaderVue,
    TodoMainVue,
    TodoFooterVue
    }
}
</script>

<style>

</style>
